<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../../jquery-1.12.4.min.js"></script>
</head>

<body>
    <ul>
        <li>
            <a href="http://www.webo.com/liuwayong">我的微博</a>
        </li>
        <li>
            <a href="http://http://www.cnblogs.com/Wayou/">我的博客</a>
        </li>
        <li>
            <a href="http://wayouliu.duapp.com/">我的小站</a>
        </li>
    </ul>
</body>
<script>
    //1, 通过$.extend() 来扩展jQuery
    //2, 通过$.fn 向jQuery添加新的方法
    //3, 通过$.widget() 应用jQuery UI的部件工厂方式创建
    // 第一种方式最简单，仅仅是在jQuery命名空间或者理解成jQuery身上添加了一个静态方法而以。
    // 所以我们调用通过$.extend()添加的函数时直接通过$符号调用（$.myfunction()）而不需要选中DOM元素($('#example').myfunction())
    //【1-1】起手
    $.extend({
        sayHello: function(name) {
            console.log('Hello,' + (name ? name : 'Dude') + '!');
        }
    })
    $.sayHello(); //调用
    $.sayHello('Wayou'); //带参调用
    //【1-2】这种方式用来定义一些辅助方法是比较方便的。比如一个自定义的console，输出特定格式的信息，定义一次后可以通过jQuery在程序中任何需要的地方调用它。
    $.extend({
        log: function(message) {
            var now = new Date(),
                y = now.getFullYear(),
                m = now.getMonth() + 1, //！JavaScript中月分是从0开始的
                d = now.getDate(),
                h = now.getHours(),
                min = now.getMinutes(),
                s = now.getSeconds(),
                time = y + '/' + m + '/' + d + ' ' + h + ':' + min + ':' + s;
            console.log(time + ' My App: ' + message);
        }
    })
    $.log('initializing...'); //调用
    //【2-1】但这种方式无法利用jQuery强大的选择器带来的便利，要处理DOM元素以及将插件更好地运用于所选择的元素身上，还是需要使用第二种开发方式。
    // 你所见到或使用的插件也大多是通过此种方式开发。

    //基本形式
    $.fn.pluginName = function() {
        //your code goes here
    };
    //往$.fn上面添加一个方法，名字是我们的插件名称。然后我们的插件代码在这个方法里面展开【比如我们将页面上所有链接颜色转成红色】
    //说明：在插件名字定义的这个函数内部，this指代的是我们在调用该插件时，用jQuery选择器选中的元素，一般是一个jQuery类型的集合。
    //比如$('a')返回的是页面上所有a标签的集合，且这个集合已经是jQuery包装类型了，也就是说，在对其进行操作的时候可以直接调用jQuery的其他方法而不需要再用美元符号来包装一下。
    //相当于$('a').css()。
    $.fn.myPlugin = function() {
        //在这里面,this指的是用jQuery选中的元素
        //example :$('a'),则this=$('a')
        this.css('color', 'red');

        //在这里面,this指的是用jQuery选中的元素[注意这里的this是个jq对象集合]

        //这里的return是为了不打破jq的链式编程
        return this.each(function() {
            // 而这里面的this就是单独的dom元素了，需要美元符号来包裹
            $(this).append(' ' + $(this).attr('href'));
        })

    };
</script>
<script type="text/javascript">
    $(function() {
        $('a').myPlugin();
    })
</script>

</html>